<template>
  <div class="foot">
    <div class="foots"></div>
    <div class="footer">
        <div class="box" v-for="(v,index) in arr" :key="index">
            <img :src="v.img" alt="">
            <span>{{ v.msg }}</span>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            arr:[
                { img:"https://img.alicdn.com/imgextra/i2/O1CN01H7x6XV1Z2KpR8bbEK_!!6000000003136-2-tps-90-90.png",msg:"新发现"},
                { img: "https://img.alicdn.com/imgextra/i2/O1CN01dguuGp1Y2xkiasumV_!!6000000003002-2-tps-90-90.png", msg: "品牌" },
                { img: "https://img.alicdn.com/imgextra/i3/O1CN01joR0hn20zrvsu8k9C_!!6000000006921-2-tps-90-90.png", msg: "购物金" },
                { img: "https://img.alicdn.com/imgextra/i2/O1CN01A4iZMN1nzmrLASSdD_!!6000000005161-2-tps-90-90.png", msg: "我的" },


            ]
        }
    }
}
</script>

<style scoped>
.foots{
    width: 100%;
    height: 57.03px;
}
.footer{
    width: 100%;
    height: 57.03px;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 1000;
}
.box{
    width: 75px;
    height: 57px;
    /* color: #7C48Db; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box img{
    width: 30px;
    height: 30px;

}

</style>